<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <title>测试结果</title>
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current bg-light-gray" id="pt-main">
        <div class="pt-page pt-page-1">
          <div class="content questionnaire-result-bg">
            <div class="appoint-title text-center" style="margin-top: 1.25rem;"><span>测试结果</span></div>
            <div class="radar-chart">
              <canvas id="ftChart" width="250" height="250"></canvas>
            </div>
            <p class="text-center;">以上5种属性测试，无论你是否意识到，都会是影响你坚持运动运动的关键因素。加油吧！</p>
            <a href="javascript:void(0)" class="pulldown-more pulldown-btn" data-animation="3">专属运动打卡计划 <span class="icon icon-updown"></span></a>
          </div>
        </div>
        <div class="pt-page pt-page-2">
          <div class="content ">
            <div class="appoint-title text-center" style="margin-top: 1.25rem;"><span>测试结果</span></div>
            <div class="questionnaire-result box-shadow" style="margin-top: 1.5rem; margin-bottom: 1rem;">
              <div class="result-title"><img src="${ctx.resource}/image/questionnaire/${course.courseLevel.primary ? 'new' : course.courseLevel.middle ? 'young' : 'old'}-coach.png" width="100%"></div>
              <div class="custom-plan text-center clearfix">
                <c:forEach var="monthly" items="${monthlyCoursewares}">
                  <div class="pull-left result-item ">
                    <img src="${ctx.resource}/image/questionnaire/questionnaire-cover.png">
                    <p class="ellipsis" style="font-weight: 100;">${monthly.template.name}</p>
                    <p class="ellipsis" style="font-weight: 500;">${monthly.template.description}</p>
                  </div>
                </c:forEach>
              </div>
            </div>
            
            <div style="margin-top: .5rem; margin-left: 1.5rem; margin-right: 1.5rem; margin-bottom: 2.2rem;">
              <img src="${ctx.resource}/image/questionnaire/result-qrcode.png" style="width: 100%;">
            </div>
            
            <c:choose>
              <c:when test="${invitees == 0}">
                <a href="javascript:void(0);" class="button button-fill ft-button-yellow ft-market-btn movement-clock result-share">转发好友<br/>开启专属打卡课程</a>
              </c:when>
              <c:otherwise>
                <a href="${ctx.host}/courses" class="button button-fill ft-button-yellow ft-market-btn movement-clock">已邀请${invitees}位好友完成测试<br/>请开启课程！</a>
              </c:otherwise>
            </c:choose>
          </div>
        </div>
     </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/questionnaire/questionnaire-result.js" />
    <script type="text/javascript">
      require(['page/questionnaire/questionnaire-result'], function(page) {
        page.init({
          "physicalAttrScores" : "${questionnaire.physicalAttrScores}",
          "sportsKnowledgeScores" : "${questionnaire.sportsKnowledgeScores}",
          "exerciseRegularlyScores" : "${questionnaire.exerciseRegularlyScores}",
          "physicalMentalPleasureScores" : "${questionnaire.physicalMentalPleasureScores}",
          "sportsPracticeSkillScores" : "${questionnaire.sportsPracticeSkillScores}",
          "course" : "${course.courseLevel.name}",
          'jsConfig': JSON.parse('${wechatJsConfig}'),
          'inviter': '${user.openid}'
        })
      })
    </script>
  </body>
</html>